<template>
	<view class="container">
		<view class="head">
			<view class="fisze-24 line-gray-3">欢迎开启FENDI CLUB 精酿啤酒之旅~</view>
			<view class="user-panel">
				<view class="not-logged-in" v-if="!isLogin">
					<button @click="integrals" type="primary" plain="true">立即登录</button>
				</view>
				<view v-else>
					<view>
						<view class="fsize-32 fweigh-600">{{userInfo.nickName}}</view>
						<view class="mt-10">{{userInfo.mobile}}</view>
						<view class="fisze-24 mt-20">
							<w-barcode :options="options" />
							<view class="mt-10 text-align-center">{{userInfo.number}}</view>
						</view>
					</view>
					<view class="tips">
						<image :src="userInfo.avatarImage" />
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<!-- 我的资料 start-->
			<view class="flex justify-between bg-white align-center padding-30 border-radius-10 mt-20">
				<view class="flex align-center">
					<uni-icons custom-prefix="iconfont" type="icon-shenfen" color="#F1BA48" size="28" />
					<text class="fsize-28 ml-20">我的资料</text>
				</view>
				<uni-icons custom-prefix="iconfont" type="icon-right" />
			</view>
			<view class="flex justify-between bg-white align-center padding-30 border-radius-10 mt-20" @click="$u.route('/pages/user/coupon/coupon')">
				<view class="flex align-center">
					<uni-icons custom-prefix="iconfont" type="icon-qiaquan" color="#F1BA48" size="28" />
					<text class="fsize-28 ml-20">红包卡券</text>
				</view>
				<uni-icons custom-prefix="iconfont" type="icon-right" />
			</view>
			<!-- 我的资料 end-->
		</view>

		<view class="layout" v-if="isLogin">
			<button @click="LAY_OUT()" type="primary" plain="true">退出登录</button>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				boardcast: [],
			}
		},
		computed: {
			...mapState(['isLogin', 'userInfo']),
			options() {
				return {
					width: 600,
					height: 100,
					code: this.userInfo.number
				}
				
			},
		},
		onLoad() {
			this.options.code =  this.userInfo.number
		},
		methods: {
			...mapMutations(['LAY_OUT']),
			integrals() {
				if(!this.isLogin) {
					uni.navigateTo({url: '/pages/login/login'})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		width: 750rpx;
		height: 500rpx;
		background: linear-gradient(34deg, #F3C45D, #EDAC2F);
		padding: 244rpx 30rpx 0 30rpx;

		.user-panel {
			margin-top: 10rpx;
			border-radius: 10rpx;
			background-color: #fff;
			padding: 30rpx;
			position: relative;

			.tips {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				background-color: #F3C45D;
				position: absolute;
				top: -40rpx;
				right: 30rpx;
				image{
					width:100%;
				}
			}
			.not-logged-in{
				padding: 86rpx;
			}
		}
	}

	.content {
		padding: 0 30rpx;
		margin-top: 130rpx;
		.wallet {
			margin-top: -40rpx;
		}
	}
	.layout{
		padding: 80rpx;
	}
</style>